<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty zhiBiao">
        <el-row>
          <el-col :span="24" style="overflow:hidden;border-bottom:1px solid #0e258c;margin-bottom:20px;">
            <span style="float:left;font-size:24px;margin-bottom:10px;">任务审核关系</span>
            <div style="text-align:right;float:right">
              <!-- <el-button type="primary" @click="add">添加审核人和参与人</el-button> --> 
              <el-button type="primary">复用</el-button>
              <!--                            <el-button type="primary">导入</el-button>-->
              <!--                            <el-button type="primary">导出</el-button>-->
              <el-button type="primary" @click="handleSave">保存</el-button>
              <el-button type="primary" @click="fanH">返回#</el-button>
            </div>
          </el-col>
          <div style="margin:0 auto;">

            <table class="xieBox" border="1" v-if="canyurendataListSelected.length>0">
              <tr>
                <td class="preBox" colspan="2">
                  <span class="shr">审核人</span>
                  <span class="cyr">参与人</span>
                  <span class="oblique_line"></span>
                </td>

                <td v-for="(item,index) in shrdataListSelected">
                  <div>
                    <p>{{ item.Shryname }}</p>
                    <span @click="selectedshr(item,index)" class="one">全</span>
                    <span @click="cancelshr(item,index)" class="two">消</span>
                  </div>
                </td>
              </tr>
              <tr v-for="(canyuItem,canyuIndex) in canyurendataListSelected">
                <td class="preBox">
                  <div>
                    <div>{{ canyuItem.cyryname }}</div>
                    <span class="three" @click="selectedcyr(canyuItem,canyuIndex)">全</span>
                    <span class="four" @click="cancelcyr(canyuItem,canyuIndex)">消</span>
                  </div>
                </td>
                <td style="width: 210px">{{ canyuItem.cyrydepartname }}</td>
                <td v-for="(shenheTtem,shenheIndex) in shrdataListSelected">
                  <el-checkbox v-model="canyuItem[shenheTtem.Shryid]"
                               @change="handleCheck(canyuItem,canyuIndex,shenheTtem,shenheIndex)"></el-checkbox>
                </td>
              </tr>
            </table>
          </div>
        </el-row>
      </div>
    </basic-container>
    <el-dialog :close-on-click-modal="false" :visible.sync="visible" width="60vw" top="8vh">
      <el-row :gutter="80">
        <el-col :xs="24" :sm="24" :md="12">

          <div>
            <h3 style="float:left">参与人信息</h3>
            <el-button style="float:right;margin-top:20px;" type="primary" @click="addcyr">新增</el-button>
          </div>
          <el-table
            style="width: 100%;margin-top:20px"
            :data="canyurendataList"
            border>
            <el-table-column
              prop="cyrName"
              header-align="center"
              align="center"
              label="参与人姓名">
            </el-table-column>
            <el-table-column
              prop="cyrZhiwu"
              header-align="center"
              align="center"
              min-width="180"
              label="参与人职务">
              <template slot-scope="scope">
                <span>{{ validatenull(scope.row.cyrZhiwu) ? '-' : scope.row.cyrZhiwu }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12">
          <div>
            <h3 style="float:left">审核人信息</h3>
            <el-button style="float:right;margin-top:20px;" type="primary" @click="addshr">新增</el-button>
          </div>
          <el-table
            style="width: 100%;margin-top:20px"
            :data="shrdataList"
            border>
            <el-table-column
              prop="shrName"
              header-align="center"
              align="center"
              label="审核人姓名">
            </el-table-column>
            <el-table-column
              prop="shrZhiwu"
              header-align="center"
              align="center"
              min-width="180"
              label="审核人职务">
              <template slot-scope="scope">
                <span>{{ validatenull(scope.row.shrZhiwu) ? '-' : scope.row.shrZhiwu }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <UserCommonSelect v-if="usercomment" ref="usercomment" @submitfy="submitfy"></UserCommonSelect>
      <span slot="footer" class="dialog-footer">
        
                <el-button type="primary" @click="zxryok()">确定</el-button>
                <el-button type="primary" plain @click="visible = false">返回</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import UserCommonSelect from '@/views/hetongrenwu/components/usercomment-select'
import {getCyr, getShr,saveZxgzShCy} from '@/api/hetongrenwu/zhuanxianggongzuo/zxgzchuangjian'
import {validatenull} from "@/util/validate";

export default {
  components: {
    UserCommonSelect
  },
  name: "zxsh-form",
  props: {
    zxshformref: {}
  },
  data() {
    return {
      checked: false,
      visible: false,
      zxshdataList: [],
      jsonData: '',
      usercomment: false,
      canyurendataList: [],
      shrdataList: [],
      checkedData: [],
      shrdataListSelected: [],
      canyurendataListSelected: [],
    }
  },
  methods: {
    init(data) {
      this.getShrAndCyr(data.id)
    },
    fanH() {
      this.$emit('zxpjC', '返回')
    },
    add() {
      this.visible = true;

    },
    addcyr() {
      this.usercomment = true;
      this.jsonData = JSON.stringify(this.canyurendataList)
      this.$nextTick(() => {
        this.$refs.usercomment.init(this.zxshformref.rowid, "zxcyr", this.jsonData);
      });

    },
    addshr() {
      this.usercomment = true;
      this.jsonData = JSON.stringify(this.shrdataList)
      this.$nextTick(() => {

        this.$refs.usercomment.init(this.zxshformref.rowid, "zxshr", this.jsonData);
      });

    },
    submitfy(data) {

      if (data.type == 'zxcyr') {
       //console.log(JSON.stringify(data) + "2222----");
        this.canyurendataList = data.tableDataUser;
      }
      if (data.type == 'zxshr') {
        this.shrdataList = data.tableDataUser;
      }
    },
    zxryok() {
      this.visible = false;
     //console.log(JSON.stringify(this.shrdataList) + "===------" + JSON.stringify(this.canyurendataList))
      this.shrdataListSelected = this.shrdataList;
      this.canyurendataListSelected = this.canyurendataList;
    },
    //获取审核人和参与人
    getShrAndCyr(zxid) {
      //获取参与人
      getCyr(zxid).then(res => {
         var dataArr= res.data.data;
        this.canyurendataListSelected=dataArr.map(item=>{
          if(item.shid){
            var shidStr=item.shid.toString();
            var shidArr=shidStr.split(',');
            shidArr.forEach(shidItem=>{
              item[shidItem]=true;
            })
          }
          return item
        })
      })
      //获取审核人
      getShr(zxid).then(res => {
        this.shrdataListSelected = res.data.data;
      })
    },
    //审核人处的全选（选择参与人的数据）
    selectedshr(shrObj) {
      this.canyurendataListSelected.forEach(item => {
        item[shrObj.Shryid] = true;
        if (item.shid) {
          var shidStr=item.shid.toString();
          var shidArr = shidStr.split(',');
          var shidIndex = shidArr.findIndex(shidItem => shidItem == shrObj.Shryid);
          if (shidIndex == -1) {
            shidArr.push(shrObj.Shryid)
          }
          item.shid = shidArr.join(',');
        } else {
          item.shid = shrObj.Shryid.toString();
        }
      })
      this.$forceUpdate();
     //console.log(this.canyurendataListSelected)
    },
    //审核人的取消（取消参与人的数据）
    cancelshr(shrObj) {
      this.canyurendataListSelected.forEach(item => {
        item[shrObj.Shryid] = false;
        item.shid = ''
      })
      this.$forceUpdate();
    },
    //参与人处的全选（选择审核人的数据）
    selectedcyr(cyrObj, index) {
      var ids = [];
      this.shrdataListSelected.forEach(item => {
        this.canyurendataListSelected[index][item.Shryid] = true;
        ids.push(item.Shryid)
      })
      this.canyurendataListSelected[index].shid = ids.join(',')
      this.$forceUpdate();
    },
    //参与人的取消（取消审核人的数据）
    cancelcyr(cyrObj, index) {
      this.shrdataListSelected.forEach(item => {
        this.canyurendataListSelected[index][item.Shryid] = null
      })
      this.canyurendataListSelected[index].shid = '';
      this.$forceUpdate();
    },
    //审核关系选择框选择
    handleCheck(canyuObj, canyuIndex, shenheObj, shenheIndex) {
      if(canyuObj.shid){
        var shidStr=canyuObj.shid.toString();
        var shidArr=shidStr.split(',');
        var shidIndex=shidArr.findIndex(item=>item==shenheObj.Shryid)
        if(shidIndex==-1){
          shidArr.push(shenheObj.Shryid)
        }else{
          shidArr.splice(shidIndex, 1)
        }
        this.canyurendataListSelected[canyuIndex].shid=shidArr.join(',');
      }else{
        this.canyurendataListSelected[canyuIndex].shid =shenheObj.Shryid.toString();
      }
      this.$forceUpdate()
     //console.log(this.canyurendataListSelected);
    },
    //保存审核关系
    handleSave() {
     //console.log(this.canyurendataListSelected)
      saveZxgzShCy({"zxid": this.zxshformref.rowid, "jsondata": this.canyurendataListSelected}).then(res => {
        this.$message({
          type: 'success',
          message: '提交成功!'
        });
        this.getDataList()
      })
    }
  }
}
</script>

<style>
.xieBox {
  text-align: center;
  word-wrap: break-word;
  word-break: break-all;
}

.xieBox tr td {
  width: 120px;
  height: 90px;
  font-size: 24px;
}

.xieBox .preBox {
  position: relative;
}

.shr {
  display: block;
  position: absolute;
  right: 50px;
  top: 15px;
}

.cyr {
  display: block;
  position: absolute;
  left: 70px;
  bottom: 15px;
}

.xieBox p {
  margin-bottom: 6px;
}

.xieBox .one {
  float: left;
  color: rgba(0, 255, 64, 0.849);
  margin-left: 20px;
  font-size: 18px;
  cursor: pointer;
}

.xieBox .two {
  float: right;
  color: rgb(255, 0, 43);
  margin-right: 20px;
  font-size: 18px;
  cursor: pointer;
}

.xieBox .three {
  color: rgba(0, 255, 64, 0.849);
  font-size: 18px;
  position: absolute;
  right: 10px;
  top: 15px;
  cursor: pointer;
}

.xieBox .four {
  color: rgb(255, 0, 43);
  font-size: 18px;
  position: absolute;
  right: 10px;
  bottom: 15px;
  cursor: pointer;
}

span[class=oblique_line]:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 340px; /* 需要手调 ，线的长度 */
  top: 0; /* 需要手调 ，线的位置*/
  left: 0;
  background-color: #333; /* 线的颜色 black */
  display: block;
  transform: rotate(285deg); /* 需要手调 ，斜线的角度*/
  transform-origin: top;
}
</style>
